<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>Faeple 소개</title>

    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link ref="stylesheet" href="/resources/css/nanumbarungothic.css">
    <style type="text/css">
    	body {
			font-family: 'Nanum Barun Gothic',"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif!important;
			font-size:16px!important;
			line-height:1.8!important;
			color:#333!important;
 			background-color: #fff!important;
			text-shadow: 0px 1px 1px rgba(255,255,255,0.5);
		}
		h2, h1{ color:#454545!important; margin-bottom: 45px!important; }
		.img-animation{
			opacity: 0;
			transition: all ease-in-out .9s;
			-webkit-transition: all ease-in-out .9s;
			-o-transition: all ease-in-out .9s;
		}
		.section{
			width:100%;
		}
		.con01{
			width:100%;
			background-color: #fff;
			padding: 53px 0;
			z-index: 1;
		}
		.con01 .img01 {
			width:100%;
			height: auto;
			transform: translate3d(0,10%,0);
			-webkit-transform: translate3d(0,10%,0);
			-o-transform: translate3d(0,10%,0);
		}
		.img01.on{
			opacity: 1;
			transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-o-transform: translate3d(0,0,0);
		}
		.con02-text{
			display: none;
			padding-left: 620px;
			padding-top: 40px;
			z-index: 2;
		}
		.con02 .img02{
			position: absolute;
			left: 0;
			top: 0;
			transform: translate3d(-40%,0%,0);
			-webkit-transform: translate3d(-40%,0%,0);
			-o-transform: translate3d(-40%,0%,0);
			pointer-events: none;
		}
		.img02.on{
			opacity: 1;
			transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-o-transform: translate3d(0,0,0);
		}
		
    </style>
	</head>
<body>
	<div id="viewport">
	<div id="page">
	<!-- header -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- header -->
	<div style="widtht:100%;height:3px;z-index:-100;background-color: #fff;position:relative;"></div>
	<div class="con01">
	   	<div class="container" style="text-align:center;">
	   		<h2>패션피플들이 모이는곳,<br>패플에 오신것을 환영합니다</h2>
	   		<img class="img01 img-animation" src="/resources/img/company_01.jpg">
	   	</div><!-- end container -->
   	</div>
   	<div class="con02" style="width:100%; background-color: #e4e4e4; height:663px; position: relative; ">
   		<div class="container" style="overflow: hidden;height:663px;position: relative;">
	   		<img class="img02 img-animation" src="/resources/img/company_02.png" style="z-index:1;">
	   		<div class="con02-text" id="con02Text">
	   			<h1>나만의 공간을 만들어보세요.</h1>
	   			<p>
	   				쉽고 빠른 가입으로 나만의 패션공간이 생성됩니다.<br>
	   				또한 무제한으로 사진을 올릴수 있으며,<br>
	   				비공개로 설정하면 아무도 볼 수 없는 자신만의 공간이,<br>
	   				팔로워만 설정하면 원하는 사람에게만 보여지게 됩니다.
	   			</p>
	   			<a href="/signup" class="btn fbtn" style="padding:6px 20px; background-color: #FFC346; color:#000; box-shadow: 0 2px 0 0 #df9700;" title="<spring:message code="common.sign"/>"><spring:message code="common.sign"/></a>
	   		</div>
   		</div>
   	</div>
   	<script type="text/javascript">
		
	</script>
	</div><!-- end page -->
	<%@ include file="commonScript.jsp" %>
	</div><!-- end viewport -->
	<script>
		$(function(){
			$(".img01").addClass("on");
		});
		
		$(window).scroll(function(){
			if($(window).scrollTop() >= 300){
				$(".img02").addClass("on");
				$("#con02Text").fadeIn();
			}
			console.log($(window).scrollTop());
		});
	</script>
</body>
</html>